<template>
  <div class="paginator-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
        <s-paginator :pageNumber="paginatorValues.pageNumber" :pageSize="paginatorValues.pageSize"
                     :totalRecords="paginatorValues.total" :layout="paginatorValues.layout"></s-paginator>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in paginatorProps" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
      <div class="output-method">
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in paginatorMethods" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'PaginatorDemo',
    data() {
      return {
        //分页组件
        paginatorValues: {
          pageNumber: 1,
          pageSize: 10,
          total: 230,
          layout: 'prev, pager, next, jumper,sizes,total'
        },
        paginatorProps: [
          {name: 'totalRecords', desc: '默认值：0。总共有多少条数据。'},
          {name: 'pageNumber', desc: '默认值：1。当前是第几页。'},
          {name: 'pageSize', desc: '默认值：10。每页显示多少条数据。'},
          {
            name: 'layout',
            desc: '默认值："prev, pager, next, jumper,sizes,total"。分页显示什么功能：上一页、当前页、下一页、跳转至第几页、pageSize切换、数据总条数。'
          },
          {name: 'hideOnSinglePage', desc: '默认值：false，显示分页。只有一页时是否显示分页。'},
        ],
        paginatorMethods: [
          {name: 'size-change', desc: '参数：pageSize。改变pageSize时触发。'},
          {name: 'current-change', desc: '参数：currentPage。改变currentPage时触发，可以与点击上一页，点击下一页使用同一个回调函数。'},
          {name: 'prev-click', desc: '参数：currentPage。点击上一页时触发。'},
          {name: 'next-click', desc: '参数：currentPage。点击下一页时触发。'},
        ],
      }
    },
    methods: {

    },
    mounted() {

    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .paginator-demo-wrapper{
    width:100%;
    height:100%;
  }

</style>
